const { PureComponent } = require("react");

// 高阶组件也叫高阶函数
// 接收一个组件，返回一个组件
// 高阶组件是对你传入的组件进行装饰，进行一个增强
// 不能改变原组件
// 纯函数：传入组件不能修改，返回的一个新组件
function foo(WraperComponent) {
  class NewComponent extends PureComponent{
    render() {
      return (
        <div>
          <header>头部</header>
          <WraperComponent></WraperComponent>
          <footer>底部</footer>
        </div>
      )
    }
  }

  return NewComponent;
}

class DemoA extends PureComponent{
  render() {
    return (
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}

// foo(DemoA); 增强某个组件
// 现在增强的功能比较弱，实际项目中，可以增强更加强大的功能。
export default foo(DemoA);